<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 10000px;"></div> -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script>
        // 有<!DOCTYPE html>(html文档第一行)的是标准模式，没有的是怪异/混杂模式（渲染模式）

        // 查看滚动条滚动距离
        //   window.pageXOffset/pageYOffset
        // console.log(window.pageXOffset);
        // console.log(window.pageYOffset);
        //      IE8及以下的浏览器
        // document.body/document.Element.scrollLeft/scrollTop
        // console.log(document.body.scrollLeft);
        // console.log(document.body.scrollTop);
        //   兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值
        // 封装兼容性方法,求滚动轮滚动距离getScrollOffset()
        // function getScrollOffset() {
        //     if (window.pageXOffset) {
        //         return {
        //             x: window.pageXOffset,
        //             y: window.pageYOffset
        //         }
        //     } else {
        //         return {
        //             x: document.body.scrollLeft + document.documentElement.scrollLeft,
        //             y: document.body.scrollTop + document.documentElement.scrollTop
        //         }
        //     }
        // }

        // 可视区窗口尺寸
        // window.innerWidth/innerHeight
        // console.log(window.innerWidth);
        // console.log(window.innerHeight);
        //    IE8及IE8以下不兼容
        // document.documentElement.clientWidth/clientHeight
        //    标准模式下，任意浏览器都兼容
        // document.body.clientWidth/clientHeight
        //    适用于怪异模式下的浏览器
        // 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
        // function getViewportOffset() {
        //     if (window.innerWidth) {
        //         return {
        //             w: document.body.clientWidth,
        //             h: document.body.clientHeight
        //         }
        //     } else {
        //         return {
        //             w: document.documentElement.clientWidth,
        //             h: document.documentElement.clientHeight
        //         }
        //     }
        // }
        // console.log(getViewportOffset());

        // 查看元素的几何尺寸
        //    documentElement.getBoundingClientRect();(ES5方法)
        //    兼容性很好
        //    该方法返回一个对象，对象里面有,left,right,top,bottom等属性。
        //    left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
        // height和width属性老版本IE并未实现
        // 返回的结果并不是"实时的"
        // var div = document.getElementsByTagName('div')[0];
        // console.log(div.getBoundingClientRect());

        // 查看元素的尺寸
        //    dom.offsetWidth,dom.offsetHeight（求的是视觉上的尺寸）
        // 查看元素的位置
        //    dom.offsetLeft,dom.offsetTop
        //    对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标
        //    dom.offsetParent
        //    返回最近有定位的父级，如无，返回body,body.offsetParent返回null
        // eg:求元素相对于文档的坐标getElementPosition

        // 让滚动条滚动
        //    window上有三个方法
        //    scroll(x,y),scorllTo(x,y)     scorllBy(x,y)（累加滚动）
        // 三个方法功能类似，用法都是讲x,y坐标传入。即实现让滚动轮滚动到当前位置。
        // 区别：scrollBy()会在之前的数据基础上做累加。
        // eg: 利用scrollBy()快速阅读的功能
    </script>

</body>

</html>